<template>
  <page-wrap
    :showTop="isShowTop"
    hide-tab
    back
    title="非付费用户信息"
    :bg-color="uNavColor"
  >
    <view class="record-detail">
      <view style="margin-top: 200rpx">
        <view class="user-info" v-if="originFrom == 'willService'">
          <image class="head-portrait" :src="userInfo.imageUrl" />
          <view class="user-name">{{ userInfo.userName }}</view>
        </view>
        <EstimateCard
          v-else
          :share="share"
          :isConsultant="true"
          :isResult="true"
          :itemInfo="itemInfo"
        />
      </view>
      <view class="detail">
        <view class="title">订单信息</view>
        <!-- <view class="service-detail">
          <img
            class="left-logo"
            src="https://img3.job1001.com/ypMp/elan/images/careerPath/jianliyouhua.png"
          />
          <view class="right-detail">
            <view class="top">
              <view class="name">{{ itemInfo.rightProducts }}</view>
              <view class="price"
                >实付：<span class="money-label">￥</span
                ><span class="number">{{ itemInfo.price }}</span></view
              >
            </view>
            <view class="middle">
              <view class="name"
                ><span v-html="itemInfo.productDesc"></span
              ></view>
              <view class="price"
                >原价<span class="money-label">￥</span
                ><span class="number">{{ itemInfo.originPrice }}</span></view
              >
            </view>
          </view>
        </view>
        <view class="grey-line"></view> -->
        <view class="other-detail">
          <!-- <view class="detail-content">
            <view class="left-title">实际付款</view>
            <view class="right-content">
              <span class="title">已优惠</span>
              <span class="price"
                >￥{{ itemInfo.originPrice - itemInfo.price }}</span
              >
              <span class="title" style="margin-left: 24rpx">合计</span>
              <span class="price"
                >￥<span class="price-plus">{{ itemInfo.price }}</span></span
              >
            </view>
          </view> -->
          <!-- <view class="detail-content">
            <view class="left-title">订单号</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.orderNo }}</span>
              <view class="grey-clolumn"></view>
              <span
                class="copy-button"
                @click="copyTextToClipboard(itemInfo.orderNo)"
                >复制</span
              >
            </view>
          </view> -->
          <view class="detail-content">
            <view class="left-title">手机号</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.personTelephone }}</span>
            </view>
          </view>
          <!-- <view class="detail-content">
            <view class="left-title">下单时间</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.payTime }}</span>
            </view>
          </view> -->
          <!-- <view class="detail-content">
            <view class="left-title">支付方式</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ payTypeName }}</span>
            </view>
          </view> -->
          
          <view class="detail-content">
            <view class="left-title">所属项目</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.cardTypeName }}</span>
            </view>
          </view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import EstimateCard from "../cpn/estimateCard.vue";
import { orderDetail } from "@/api/modules/career.js";

export default {
  components: {
    EstimateCard,
  },
  data() {
    return {
      isShowTop: false,
      payTypeName: "",
      itemInfo: {},
      originFrom: "",
      share: {
        consultantId: uni
          .getStorageSync("consultantId")
          .replace("_consultant", ""),
        personId: uni.getStorageSync("person-id").slice(2),
        rateId: "",
        userName: "职才125461",
      },
      rcId: "",
      uNavColor: "#ffffff",
      userInfo: {
        imageUrl:
          "https://img200.yl1001.com/resume-profile/2024/04/27/d96e220b-f25c-4e7c-89b4-777cec5eefc0.jpg",
        userName: "职才125461",
      },
      recordDeatil: {
        rightProductList: [
          {
            productImg:
              "https://img200.yl1001.com/resume-profile/2024/04/27/d96e220b-f25c-4e7c-89b4-777cec5eefc0.jpg",
            productName: "简历优化",
            price: 199,
            originPrice: 299,
            productDesc: "30天保修，专家定制简历 1 份",
          },
        ],
        serviceDetail: {
          name: "简历优化",
          price: 199,
          originPrice: 299,
          desc: "30天保修，专家定制简历 1 份",
        },
        countPrice: 112,
        sumPrice: 199,
        orderNo: "2323323232656548545",
        date: "2024-04-11 13:30:30",
        payWay: "抖音支付",
        phone: "134165458455",
        redeemDate: "2024-04-11 13:30:30",
        belongObject: "Q2C端",
        orderInfoJson: {
          personPhone: "134165458455",
        },
      },
    };
  },
  onLoad(opt) {
    console.log("opt", opt);
    this.itemInfo = JSON.parse(opt.itemInfo);
    console.log("this.itemInfo", this.itemInfo);
    this.share.userName = this.itemInfo.personName;
    this.rcId = opt.rcId;
    this.originFrom = opt.originFrom;
    this.orderDetailFn();
  },
  onShow() {},
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 30) {
      this.isShowTop = true;
    } else {
      this.isShowTop = false;
    }
  },
  onUnload() {
    uni.$emit("recordCpnName", this.originFrom); //这里可以传个空。
  },
  mounted() {},
  watch: {
    itemInfo: {
      handler(val) {},
      immediate: true,
      deep: true,
    },
  },
  methods: {
    async orderDetailFn() {
      const params = {
        mallOrderId: this.itemInfo.mallOrderId,
        orderNo: this.itemInfo.orderNo,
        personId: uni.getStorageSync("person-id").slice(2),
      };
      const res = await orderDetail(params);
      if (res.code == 200) {
        this.payTypeName = res.data.orderDetail.payTypeName;
      }
    },
    copyTextToClipboard(text) {
      uni.setClipboardData({
        data: text,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "success",
            duration: 2000,
          });
        },
      });
    },
    finishServe() {
      console.log("这里触发了点击事件");
      if (this.originFrom == "willService") {
        // 此时应该调用一个接口变更当前订单状态
        // 然后修改底部文字内容
        this.originFrom = "willEstimate";
        return;
      } else {
        // 此时走分享逻辑
        uni.share({
          provider: "weixin",
          scene: "WXSceneSession",
          type: 5,
          href: "/pagesSub/orderManage/orderInfo/index",
          title: "邀请您对xxx顾问进行服务评价反馈",
          summary: "",
          imageUrl: "",
          success: function (res) {
            console.log("分享成功");
          },
          fail: function (err) {
            console.log("分享失败", err);
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

$img-base-person: $img-base + "careerPath/";

.record-detail {
  width: 100%;
  // height: 90vh;
  background-image: url($img-base + "careerPath/redemptionActivationCodeBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0rpx 18rpx;
  .user-info {
    width: 718rpx;
    height: 128rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background-color: #ffffff;
    // margin-top: 200rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .head-portrait {
      width: 88rpx;
      height: 88rpx;
      border: 3rpx solid #e3e3e3;
      border-radius: 50%;
    }
    .user-name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 800;
      font-size: 32rpx;
      color: #000000;
      margin-left: 24rpx;
    }
  }

  .detail {
    width: 718rpx;
    /* height: 704rpx; */
    background: #ffffff;
    border-radius: 16rpx;
    filter: blur(0px);
    margin-top: 16rpx;
    padding: 20rpx 20rpx 10rpx 20rpx;

    .title {
      font-size: 32rpx;
      color: #222222;
      font-family: D-DIN-PRO-700-Bold;
      font-weight: 700;
    }

    .service-detail {
      margin-top: 32rpx;
      display: flex;
      flex-direction: row;

      .left-logo {
        width: 148rpx;
        height: 148rpx;
        border-radius: 8rpx;
        background-size: 100% 100%;
      }

      .right-detail {
        margin-left: 24rpx;
        flex: 1;

        .top,
        .middle {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        .top {
          align-items: start;

          .name {
            font-weight: 800;
            font-size: 30rpx;
            color: #333333;
            width: 320rpx;
          }

          .price {
            font-weight: 400;
            font-size: 26rpx;
            color: #222222;
            .money-label {
              font-size: 24rpx;
              color: #333333;
              font-family: D-DIN-PRO-700-Bold;
              font-weight: 700;
            }

            .number {
              color: #333333;
              font-size: 44rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }
        }

        .middle {
          align-items: flex-start;
          margin-top: 12rpx;

          .name {
            font-size: 28rpx;
            color: #888888;
            font-weight: 400;
            width: 278rpx;
            /* 设置固定宽度 */
            word-wrap: break-word;
            /* 允许在单词内换行 */
          }

          .price {
            color: #bfbfbf;

            .money-label {
              font-size: 24rpx;
              color: #bfbfbf;
              font-family: D-DIN-PRO-700-Bold;
              font-weight: 700;
            }

            .number {
              color: #bfbfbf;
              font-size: 44rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }
        }
      }
    }

    .grey-line {
      width: 100%;
      height: 1.6rpx;
      background-color: #eaeaea;
      margin-top: 30rpx;
    }

    .other-detail {
      margin-top: 46rpx;

      .left-title {
        font-weight: 400;
        font-size: 30rpx;
        color: #999999;
      }

      .detail-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 44rpx;

        .right-content {
          display: flex;
          flex-direction: row;
          align-items: flex-end;

          .title {
            font-size: 24rpx;
            color: #222222;
          }

          .price {
            color: #fb5806;
            font-size: 26rpx;

            .price-plus {
              font-size: 48rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }

          .order-num {
            font-weight: 400;
            font-size: 30rpx;
            color: #888888;
          }

          .grey-clolumn {
            width: 4rpx;
            height: 24rpx;
            background-color: #979797;
            margin: 0 20rpx;
          }

          .copy-button {
            font-weight: 400;
            font-size: 30rpx;
            color: #222222;
          }
        }
      }
    }
  }
}
</style>
